<template>
	<view class="pagination-wrap">
		<view class="pagination" >
			<view class="pagination-total" v-if="layout.indexOf('total') !== -1"> 共{{total}}条</view>
			<picker class="pagination-sizes" @change="bindPickerChange" :value="pageSizesIndex" :range="pageSizes"  v-if="layout.indexOf('sizes') !== -1">
				<view class="uni-input">{{pageSizes[pageSizesIndex]}}条/页</view>
			</picker>

			<view class="pagination-btn"  :class="[{disabled: currentPage <= 1}]" @click="currentChange(currentPage-1)">
				<slot name="left"><text class="iconfont icon-arrow-left1"></text></slot>
			</view>		
			<view class="pager">
				<view class="number" v-for="(num, index) in showBadgeNum" :key="index"
					:style="(num + needAddNun) == currentPage ? activStyle : ''"
					@click="currentChange(num + needAddNun)"
				>
					{{ num + needAddNun }}
				</view>
			</view>
			
			<view class="pagination-btn" :class="[{disabled: currentPage >= totalPage}]"  @click="currentChange(currentPage+1)">
				<slot name="right">
					<text class="iconfont icon-arrowright"></text>
				</slot>
			</view>
			<view class="pagination-jumper" v-if="layout.indexOf('jumper') !== -1">
				前往<input type="number" autocomplete="off" min="1" max="4" v-model="inputValue" @confirm="handleInput" style="">页
			</view>
		</view>
	</view>	
	
</template>

<script>
	export default {		
		props: {
			
			// 当前页
			currentPage: { 
				type: [Number, String],
				default: 1
			},
			
			// 数据总量
			total: { 
				type: [Number, String],
				default: 0
			},
			
			// 每页数据量
			pageSize: { 
				type: [Number, String],
				default: 10
			},
			
			// 最大页码按钮数
			pagerCount: { 
				type: [Number, String],
				default: 5
			},
			
			pageSizes: {
				type: Array,
				default: () => [10, 20, 30, 40]
			},
			
			// 颜色
			color: {
				type: String,
				default: '#007aff'
			},
			
			// 背景
			background: {
				type: Boolean,
				default: false,
			},
			
			// 圆角
			round: {
				type: Boolean,
				default: false
			},
			
			// 布局
			layout: String
		},
		data () {
			return {
				temp_current_page: this.currentPage,
				pageSizesIndex: 0,
				inputValue: ''
			}
		},
		computed: {
			/** 最大页码按钮数
			 * 不能小于1和大于总页数
			 */
			pagerNum() {
				return this.pagerCount <= 1 ? 1 : (this.pagerCount > this.totalPage  ?  this.totalPage :  this.pagerCount)
			},
						
			// 实际显示页码按钮数
			showBadgeNum () {
				let len = this.totalPage;
				if (len >= this.pagerNum) len = this.pagerNum;
				else if (len <= 1 ) len = 1;
				return len;
			},
			
			// 总页数
			totalPage () {
				return Math.ceil(this.total / this.pageSize)
			},
			
			// 需要加上的数字 
			needAddNun () {
				let halfPager = this.pagerNum / 2
				if (this.totalPage <= this.pagerNum || this.currentPage <= halfPager ) {
					return 1;
				} else if (this.totalPage - this.currentPage <= halfPager ) {
					return this.totalPage -  this.pagerNum + 1
				} else {
					return this.currentPage - Math.floor(halfPager)
				}
			},
			
			// 激活样式
			activStyle () {
				let s = ''
				if (this.background) {
					 s = `background: ${this.color};color: #fff;`
					if (this.round) {
						s += `border-radius: 50%;`
					}
				} else {
					s = `color: ${this.color};`
				}
				return s;
			}
		},
		watch: {
			temp_current_page(num) {
				this.$emit('currentChange', num)
			},
			pageSizesIndex(index) {
				this.$emit('sizeChange', this.pageSizes[index])
			},
			pageSize(val, oldVal) {
				this.temp_current_page = Math.ceil((oldVal * (this.currentPage - 1)  + 1) / val)
			}
		},
		methods: {
			currentChange(num) {
				if (num <= 1) num = 1
				else if (num >= this.totalPage)  num = this.totalPage
				this.temp_current_page = num
			},
			bindPickerChange(e) {
				this.pageSizesIndex = e.target.value
			},
			handleInput(e) {
				 let val = parseInt(e.detail.value)
				 if (val) {
					this.currentChange(val)
				 }
				 this.inputValue = ''
			}
		}
	}
</script>

<style lang="scss">
@import "./icon.css";
.pagination-wrap {
	display: flex;
	justify-content: center;
	padding: 30upx 10upx;
	font-size: 26upx;
	width: 100%;
}
.pagination {
	border-radius: 6upx;
	display: flex;
	align-items: center;
	.number,
	&-btn {
		padding: 2upx 12upx;
		min-width: 50upx;
		text-align: center;
	}
	.pager {
		display: flex;
		font-size: 28upx;
	}
	.disabled  {
		color: #bbb;
	}
	&-total,
	&-sizes
	&-jumper{
		margin: 0 6upx;
	}
	input,
	&-sizes {
		padding: 0 10upx;
		background: rgba(255, 255, 255, 0.7);
		border: 1px solid rgb(220, 223, 230);
		border-radius: 8upx;
	}
	&-jumper {
		display: flex;
		align-items: center;	
		input{
			width: 60upx;
		}
	}
}

</style>
